<template>
	<view class="">
		<page-head title="评价" :headtype="2"></page-head>
		<view class="content">
			<view class="imgs_warp">
				<view v-for="(item,index) in imgs" :key="item" class="upload">
					<image :src="URLimg+item" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="upload" @click="proFile()">
					<u-icon name="camera" color="#666666" size="50"></u-icon>
					<view style="font-size: 30rpx;color: #666666;">
						上传照片
					</view>
				</view>
				<view style="width: 200rpx;" v-if="imgs.length>0 && 2-imgs.length%3>0"
					v-for="(item,index) in 2-imgs.length%3" :key="index"></view>
			</view>
			<view class="remark_warp">
				<textarea v-model="value1" class="remark_inner" placeholder="请输入对商品的评价~"></textarea>
			</view>
			<view class="goods_rate" v-for="(item,index) in goodsRate" :key="index">
				<view class="goods">
					<image :src="URLimg+item.goods_image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="goods_rate_inner">
					<view style="font-size: 30rpx;color: #333333;">
						商品评分
					</view>
					<u-rate :count="5" v-model="item.rate" active-color="#D31E11" inactive-color="#D8D8D8" gutter="20"
						:size="60" minCount="1" inactiveIcon="star-fill"></u-rate>
				</view>
			</view>
			<view :class="issub?'submit':'nosubmit'" @click="issub?submit():''">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value: 0,
				URLimg: this.URLimg,
				order_sn: null,
				orderDetail: {},
				imgs: [],
				goodsRate: [],
				issub: true
			}
		},
		onLoad(options) {
			if (options.orderSn) {
				this.order_sn = options.orderSn
				this.getOrderDetail()
			}
		},
		methods: {
			submit() {
				let data = {
					order_sn: this.orderDetail.order_sn,
					evaluate: this.value1,
					img: this.imgs.join(","),
					score: this.goodsRate
				}
				let arr = this.goodsRate.filter(item => {
					return item.rate != 0
				})
				if (arr.length != this.goodsRate.length) {
					this.apifun.toast("请评分")
					return false
				}
				if (data.evaluate != "" || this.imgs.length > 0) {
					this.issub = false
					this.apifun.unirequest("/api/evaluate/evaluate", "post", data, (res => {
						if (res.code == 200) {
							this.apifun.toast("已评价")
							
									let pages = getCurrentPages();
									let prevPage = pages[pages.length - 2];
									prevPage.$vm.page = 1
									prevPage.$vm.orderList = []
									prevPage.$vm.nodata = true
									prevPage.$vm.more = true
									prevPage.$vm.getOrderList()
									uni.navigateBack({
										delta: 1
									})
						} else {
							this.issub = true
							this.apifun.toast(res.msg)
						}
					}), true, true)
				}else{
					this.apifun.toast("请填写评价")
				}
			},
			proFile() {
				this.apifun.uploadFileimg((res) => {
					if (res.code == 200) {
						this.imgs.push(res.data.src)
					}
				})
			},
			async getOrderDetail() {
				let data = {
					order_sn: this.order_sn
				}
				await this.apifun.unirequest('/api/order/getOrderDetail', 'post', data, (res => {
					if (res.code == 200) {
						this.orderDetail = res.data
						let goodsData = res.data.detail.map(item => {
							return {
								goods_id: item.goods_id,
								goods_image: item.goods_image,
								rate: 0
							}
						})
						this.goodsRate = goodsData
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nosubmit {
		width: 600rpx;
		height: 88rpx;
		border-radius: 10rpx;
		background-color: #9e8786;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		margin: 0rpx auto;
		margin-top: 300rpx;
	}

	.submit {
		width: 600rpx;
		height: 88rpx;
		border-radius: 10rpx;
		background-color: #9E190F;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		margin: 0rpx auto;
		margin-top: 300rpx;
	}

	.goods_rate_inner {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 20rpx;
		height: 120rpx;
	}

	.goods_rate {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.goods {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.remark_inner {
		width: 100%;
		height: 100%;
	}

	.remark_warp {
		width: 690rpx;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.imgs_warp {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.upload {
		width: 200rpx;
		height: 200rpx;
		padding: 40rpx 0rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		border: 2rpx solid #999999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.imgs_warp {
		width: 690rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>